<template>
  <div id="app">
    <music-item v-for="item of music" :key="item.id" :data="item"></music-item>
  </div>
</template>

<script>
import MusicItem from './components/MusicItem.vue'
import axios from 'axios'
export default {
  name: 'App',
  data(){
    return {
      music:""
    }
  },
  components: {
    MusicItem
  },
  mounted(){
    axios.get('http://localhost:3000/top/playlist?cat=华语').then(res=>{
      this.music = res.data.playlists
    })
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
#app{
  padding-top: 30px; 
  padding-left: 50px;
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(253, 219, 225);
}
</style>
